<template>
    <h2 style="text-align: center;">注册页面</h2>
    <table class="table table-bordered">
        <tr>
            <td>注册名称</td>
            <td><input type="text" placeholder="请输入登录名称" v-model="info.Uname"></td>
        </tr>
        <tr>
            <td>注册密码</td>
            <td><input type="password" placeholder="请输入登录密码" v-model="info.Upwd"></td>
        </tr>
        <tr>

            <td colspan="2"><input type="button" value="注册" @click="SaveData" class="btn btn-primary"></td>
        </tr>

    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'

import { ref } from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';

const router = useRouter();
// 创建一个响应式的数据
const info = ref({
    Uname: '',
    Upwd: ''
});

//创建注册函数
const SaveData = () => {
    // 获取用户输入的账户、密码
    console.log(info.value.Uname);
    console.log(info.value.Upwd);
    // 判断用户输入的账户、密码是否为空
    if (info.value.Uname == '') {
        alert('用户名不能为空');
        return;
    }

    if (info.value.Upwd == '') {
        alert('密码不能为空');
        return;
    }
    // 验证密码长度
    if (info.value.Upwd.length < 6 || info.value.Upwd.length > 14) {
        alert('密码长度为6-14位');
        return;
    }


    // 发送 axios 请求
    // 注册成功后，跳转到登录页面
    axios.post('https://localhost:44387/api/Users/UserRegister', {
        UL_Name: info.value.Uname,
        UL_Pwd: info.value.Upwd
    })
        .then(function (response) {
            console.log(response);
            if (response.data > 0) {
                alert('注册成功');

                // 跳转到登录页面
                router.push('/login');
            }
            else if (response.data == -1) {
                alert('用户名已存在');
            }
            else {
                alert('注册失败');
            }
        })
        .catch(function (error) {
            console.log(error);
        });


}


</script>
